Informatique au lycee

Le squelette HTML5

Créer un site Web

Tous les sites web sont basés sur le HTML et le CSS, ils sont incontournables et universels aujourd'hui. Ils sont à la base même du Web. Le langage HTML a été inventé par un certain Tim Berners-Lee en 1991…

HTML et CSS sont deux « langues » qu'il faut savoir parler pour créer des sites web. C'est le navigateur web qui fera la traduction entre ces langages informatiques et ce que vous verrez s'afficher à l'écran.

HTML (HyperText Markup Language): il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. ».

CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

Une troisième langue,le Javascript s'invite dans tout cela pour rendre une page HTML dynamique et plus interactive.

Un fichier html est un fichier texte que nous pouvons éditer avec le blocnote, Notepad++, sublime Text, Atom, ....

Votre navigateur est le programme qui nous permet de voir les sites web. Son travail est de lire le code HTML et CSS pour afficher un résultat visuel à l'écran. Si votre code CSS dit « Les titres sont en rouge », alors le navigateur affichera les titres en rouge. Le rôle du navigateur est donc essentiel ! On ne dirait pas, mais un navigateur est un programme extrêmement complexe. Vous vous en rendrez vite compte, les différents navigateurs n'affichent pas le même site exactement de la même façon ! Il faudra vous y faire et prendre l'habitude de vérifier régulièrement que votre site fonctionne correctement sur la plupart des navigateurs.

Le squelette HTML5

Il se compose de balises délimitées par les symboles < et > qui permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents. Le HTML est interprété côté client grâce aux navigateurs web.

<!doctype html> <!--indique que la page web est en HTML5-->
<html lang="fr"> <!--début d'un document de type HTML.-->
   <head> <!--début de la zone d'en-tête-->
	 <meta charset="utf-8"><!--définit le type d'encodage des acaractères-->
	 <title>Titre de la page</title><!--titre de la page qui s'affiche dans le navigateur-->
   </head> <!--fin de la zone  d'en-tête.-->
   <body> <!--début du document qui s'affiche dans le navigateur-->
		Hello the world
		

   </body> <!--fin de la page web -->
</html> <!--fin d'un document de type HTML.-->

Code minimum pour une page en HTML

Organisation d'une page web : Le DOM

Balises du DOM :

<header> : spécifie une introduction, ou un groupe d’élément de navigation (entête de document).
<footer> : définit un pied de page.
<section> : définit les sections, sous parties dans un document.
<article> : définit une partie indépendante du site (peut contenir un header et un footer).
<aside> : il s’agit d’un bloc à associer au contenu qui le précède (ex définition de termes, ou présentation d’exemples…).
<nav> : définit un bloc de navigation.

Ces balises permettent de construire la structure en arbre des pages web, on appelle cette structure le DOM (Document Object Model).

Document Object Model

Quelques balises

Une balise est un élément de texte (un nom) encadré par le caractère inférieur (<) et le caractère supérieur (>).

Balise p pour paragraphe

Elles encadrent l'élément sur lequel elles agissent, en résumé, toute balise ouverte doit être refermée. Une balise fermante est précédée du caractère /.

Il existe deux types de balises :

Des balises de type inline (il n’y a pas de retours à la ligne)
Des balises de type block (il y a un retour à la ligne avant et après l’information)

Deux balises sont souvent utilisées afin d’y ajouter des paramètres de formatage CSS (à voir au chapitre suivant):

La balise <div>
La balise <span>.

L’utilisation des paramètres sera expliquée lors de la présentation des CSS3. Quelques balises standard :

 : Commentaire qui ne s'affiche pas dans le navigateur.
<b>zone en gras</b> : zone en gras.
<i>zone en italique</i> : zone en italique.
<u>souligne le texte</u> : souligne le texte.
<br /> : Retour à la ligne.
<pre>…</pre> : texte préformaté.
<sub>indice</sub> : _indice.
<sup>exposant</sup> : ^exposant.

Ces balises ne sont là que pour illustrer, elle ne structure pas le document.

<strong>Mettre en évidence une information</strong> : Mettre en évidence une information.
<p>…</p> : Paragraphe.
<mark>marquer du contenu</mark> : marquer du contenu.

Ces trois dernières balises apportent une connaissance sémantique au document.

Les titres

Il y a 6 niveaux de titres :

<h1>Titre 1 : titre principale</h1> :
Titre1:titre principal
<h2>Titre 2 : titre de section</h2> :
Titre2:titre de section
<h6>Titre 6 : sous titre</h6> :
Titre 6 : sous titre

Les listes

Les balises pour définir des listes :

<ul>…</ul> : liste non ordonnée.
<ol>...</ol> : liste ordonnée.
<li> : élément de liste.

Voici un exemple :

<ul>
  <li> Le HTML</li>
  <li> Le CSS</li>
  <li> Le Javascript</li>
</ul>

Les liens

Les liens permettent à la suite d’un clic sur un mot ou une image de se rendre :

Vers un autre endroit du document,
Vers un autre document HTML,
Vers un autre site web.

Syntaxe :

<a href="adresse ou URL (Uniforme Ressource Location">Données (balisées ou non)</a>

Lien externe => http://google.fr

<a href="http://google.fr">Aller sur Google</a>

Lien interne => chemin vers le fichier HTML dans le répertoire. Lien au sein de la page.

Exemple :

Placer le point d’ancrage par exemple en haut de la page :

 <h1 name="debut">Début du document</h1> ou <h1 id="debut">Début du document</h1>

Placer le lien vers l’ancre au bas de la page:
```
 <a href="#debut">Aller au début</a>
```
Lien vers l’ancre d’une autre page : <a href=’’URL#...’’>…</a>

Option des liens :

<a href="…" option>…</a>

Exemples d'options (attribut) :

title="…" : texte qui apparait au passage de la souris
```
<a href="…" title="lien vers ...">Aller au lien</a>
```

target="…" : mode d’ouverture du lien :

<a href=lien" target="_blank">Ouvre le lien dans une nouvelle page</a>

Envoyer un mail en lançant le serveur mail :
```
<a href="mailto :adresse_mail">…</a>
```

Télécharger un fichier sur le serveur :

<a href="fichier_a_telecharger" download>Télécharger le fichier</a>

Les images

Voici le code qui permet d’afficher une image :

<img src="site_informatique/html_css/images/faustin.png" />

Exemples d'option (attribut) :

alt="…" : texte alternatif en cas d’impossibilité d’afficher une image
title="…" : ajouter une infobulle.

<img src="site_informatique/html_css/images/faustin.png" title="lycée" />

On peur aussi habiller l'image avec les balises :

<figure> : définit l’encapsulation des images.
<figcaption> : définit la légende d’une image introduite par la balise figure.

<figure>
<img src="site_informatique/html_css/images/faustin.png" alt="image indisponible" title="lycée" />
<figcaption>Le lycée</figcaption>
</figure>

On a la possibilité de placer plusieurs images dans la balise figure.

Format privilégié pour les images :

JPG (Joint Photographic Expert Group)

PNG (Portable Network Graphics),

le GIF.

Les tableaux

Un tableau est composé de ligne et de colonnes qui forment les cellules. Il commence par le balise :

<table>

: déclaration du tableau.

Exemples d'option (attributs) :

border="..." : en pixel pour la largeur des lignes.
cellspacing="..." : espacement entre les cellules.
cellpadding="..." : espacement entre les bords d'une cellule et son contenu.
width="..." : largeur du tableau en pixel ou en pourcentage.

On utilise les balises suivantes :

<caption> : permet de donner un titre au tableau ( à placer juste après la balise <table>)
Il est possible de placer le titre en haut (caption-side:top) ou en bas (caption-side:bottom) via les fichiers CSS.
<tr> : permet de définir une ligne du tableau.
<th> : permet de définir une cellule d’entête du tableau.
<td> : permet de définir une cellule du tableau (contenu dans les lignes).

Une cellule peut contenir du texte, des images, des liens ou encore un tableau. On peut aussi y ajouter une couleur d'arrière-plan (bgcolor).

On a la possibilité de fusionner des cellules : horizontalement : colspan=''X''. verticalement : rowspan=''X''. X représente le nombre de cellules que l'on souhaite fusionner.

Autres attributs :

align : left/center/right (alignement horizontal).
valign :top/middle/bottom (alignement vertical).

Structurer le tableau :

<thead> : zone d’entête du tableau
<tfoot> : zone de pied de page du tableau
<tbody> : zone pour le corps du tableau

Voici le code d'un tableau :

<table>
  <caption>Convertir le binaire en décimal</caption>
  <thead>
    <tr>
      <th>Décimal</th>
      <th>Binaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0</td>
      <td>0</td>
    </tr>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>2</td>
      <td>10</td>
    </tr>
  </tfoot>
</table>

Informatique au lycée Faustin Fleret

Créer un site Web :

Le squelette HTML5

Le squelette HTML5

Organisation d'une page web : Le DOM

Quelques balises

Les titres

Titre1:titre principal

Titre2:titre de section

Titre 6 : sous titre

Les listes

Les liens

Les images

Les tableaux

Liens pour les Logiciels

Liens pour les cours

Restons en contact